<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules" :label-col="labelCol" :wrapper-col="wrapperCol">
        
        <a-form-model-item label="计算类型" prop="calculationType">
          <a-radio-group v-model="model.calculationType" @change="onCalculationTypeChange">
            <a-radio value="task">按任务计算</a-radio>
            <a-radio value="employee">按员工计算</a-radio>
            <a-radio value="batch">批量计算</a-radio>
          </a-radio-group>
        </a-form-model-item>
        
        <a-form-model-item v-if="model.calculationType === 'task'" label="任务ID" prop="taskId">
          <a-input v-model="model.taskId" placeholder="请输入任务ID"></a-input>
        </a-form-model-item>
        
        <a-form-model-item v-if="model.calculationType === 'employee'" label="员工" prop="employeeId">
          <a-select 
            v-model="model.employeeId" 
            placeholder="请选择员工"
            show-search
            option-filter-prop="children"
            style="width: 100%">
            <a-select-option v-for="employee in employeeList" :key="employee.id" :value="employee.id">
              {{ employee.name }} ({{ employee.no }})
            </a-select-option>
          </a-select>
        </a-form-model-item>
        
        <a-form-model-item v-if="model.calculationType === 'employee'" label="计算日期" prop="calculationDate">
          <a-date-picker 
            v-model="model.calculationDate" 
            style="width: 100%" 
            placeholder="选择计算日期"
            format="YYYY-MM-DD" />
        </a-form-model-item>
        
        <a-form-model-item v-if="model.calculationType === 'batch'" label="日期范围" prop="dateRange">
          <a-range-picker
            v-model="model.dateRange"
            style="width: 100%"
            format="YYYY-MM-DD"
            :placeholder="['开始日期', '结束日期']" />
        </a-form-model-item>
        
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import { calculateTaskSalary, calculateBatchTaskSalary, calculateDailySalary } from '@/api/mes/salary'

  export default {
    name: 'SalaryCalculationModal',
    data () {
      return {
        title:"计算薪资",
        visible: false,
        model: {
          calculationType: 'task'
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          calculationType: [
            { required: true, message: '请选择计算类型!' },
          ],
          taskId: [
            { required: true, message: '请输入任务ID!' },
          ],
          employeeId: [
            { required: true, message: '请选择员工!' },
          ],
          calculationDate: [
            { required: true, message: '请选择计算日期!' },
          ],
          dateRange: [
            { required: true, message: '请选择日期范围!' },
          ],
        },
        employeeList: []
      }
    },
    created () {
      this.loadEmployeeList();
    },
    methods: {
      show () {
        this.model = {
          calculationType: 'task'
        };
        this.visible = true;
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.confirmLoading = true;
            this.executeCalculation();
          }
        });
      },
      handleCancel () {
        this.close();
      },
      onCalculationTypeChange () {
        // 清空表单验证
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      },
      executeCalculation () {
        let promise;
        
        if (this.model.calculationType === 'task') {
          promise = calculateBatchTaskSalary({ taskId: this.model.taskId });
        } else if (this.model.calculationType === 'employee') {
          promise = calculateDailySalary({
            employeeId: this.model.employeeId,
            calculationDate: this.model.calculationDate.format('YYYY-MM-DD')
          });
        } else if (this.model.calculationType === 'batch') {
          // 批量计算逻辑
          promise = this.batchCalculate();
        }
        
        promise.then(res => {
          if (res.success) {
            this.$message.success('薪资计算完成');
            this.$emit('ok');
            this.close();
          } else {
            this.$message.error(res.message || '计算失败');
          }
        }).catch(err => {
          this.$message.error('计算失败: ' + err.message);
        }).finally(() => {
          this.confirmLoading = false;
        });
      },
      batchCalculate () {
        // 实现批量计算逻辑
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({ success: true });
          }, 1000);
        });
      },
      loadEmployeeList () {
        // 加载员工列表
        this.employeeList = [
          { id: '1', name: '张三', no: 'E001' },
          { id: '2', name: '李四', no: 'E002' },
          { id: '3', name: '王五', no: 'E003' }
        ];
      }
    }
  }
</script>
